// 首页商品渲染

define(['jq'],()=>{

    //商品数据渲染
class List{
    constructor(){
        //获取元素
        this.ul=$('.goods-render')
        // console.log(this.ul)

        this.init()
    }
    init(){
        this.request()
    }
    request(){

        $.ajax({
            url:"./data/goods.json",
            type: 'get',        
            dataType: 'json',
        })
        .then(data=>{
           var  res=data.slice(500,540)
            // console.log(res)
            this.render1(res)
            this.render2(res)
            this.render3(res)
            this.render4(res)

          
        })
    }
    // 家庭安防 数据渲染
    render1(data){
        let data1=data.slice(0,8)
        // console.log(data1)
        data1.forEach(item=>{
           (this.ul)[0].innerHTML +=`
            <li>
            <a href="./html/details.html?id=${item.goods_id}" target="_blank" style="text-decoration:none; color:black;">
            <div class="pic">
                <img src="${item.img_small_logo}">
            </div>
            <p class="title hide">${item.title}</p>
          
            <p class="price">${item.price}</p>
            <button data-id=${item.goods_id}>加入购物车</button>
            </a>
        </li>
            `
        })
    }
 //行车安全 数据渲染
    render2(data){
        let data2=data.slice(10,18)
        data2.forEach(item=>{
           (this.ul)[1].innerHTML +=`
            <li>
            <a href="./html/details.html?id=${item.goods_id}" target="_blank" style="text-decoration:none; color:black;">
            <div class="pic">
                <img src="${item.img_small_logo}">
            </div>
            <p class="title hide">${item.title}</p>
            
            <p class="price">${item.price}</p>
            <button data-id=${item.goods_id}>加入购物车</button>
            </a>
        </li>
            `
        })
    }
    //扫地机器人 数据熏染
    render3(data){
        let data3=data.slice(20,28)
        data3.forEach(item=>{
           (this.ul)[2].innerHTML +=`
            <li>
            <a href="./html/details.html?id=${item.goods_id}" target="_blank" style="text-decoration:none; color:black;">
            <div class="pic">
                <img src="${item.img_small_logo}">
            </div>
            <p class="title hide">${item.title}</p>
           
            <p class="price">${item.price}</p>
            <button data-id=${item.goods_id}>加入购物车</button>
            </a>
        </li>
            `
        })
    }
    //智能安全  数据渲染
    render4(data){
        let data4=data.slice(30,38)
        data4.forEach(item=>{
           (this.ul)[3].innerHTML +=`
            <li>
            <a href="./html/details.html?id=${item.goods_id}" target="_blank" style="text-decoration:none; color:black;">
            <div class="pic">
                <img src="${item.img_small_logo}">
            </div>
            <p class="title hide">${item.title}</p>
            
            <p class="price">${item.price}</p>
            <button data-id=${item.goods_id}>加入购物车</button>
            </a>
        </li>
            `
        })
    }


}
new List()

})


